{% set uniqid = uniqid ?? uniqid('machine_') %}
{% set idBase = "vagrantfile-vm-provider-gce-machines-#{uniqid}" %}
{% set nameBase = "vagrantfile[vm][provider][gce][machines][#{uniqid}]" %}

<div id="{{ idBase }}" data-uniqid="{{ uniqid }}" data-name="{{ nameBase }}"
     class="tab-pane {{ active is defined and active ? 'active' }}">
    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-id">
            Internal Identifier
        </label>
        <input type="text" id="{{ idBase }}-id"
               name="{{ nameBase }}[id]"
               placeholder="gce1" class="form-control"
               value="{{ machine.id }}" />
        <div class="help-block">
            This is the ID used within the <code>Vagrantfile</code>. It is only used
            for your internal identification.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-hostname">
            Hostname
        </label>
        <input type="text" id="{{ idBase }}-hostname"
               name="{{ nameBase }}[hostname]"
               placeholder="gce1" class="form-control"
               value="{{ machine.hostname }}" />
        <div class="help-block">
            The hostname the machine should have.
            <a href="http://stackoverflow.com/a/3523068/446766"
               target="_blank">This answer lists all valid characters.</a>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-name">
            Instance Name
        </label>
        <input type="text" id="{{ idBase }}-name"
               name="{{ nameBase }}[name]"
               placeholder="gce1-puphpet" class="form-control"
               value="{{ machine.name }}" />
        <div class="help-block">
            Name your Google Compute Engine instance as it will
            appear in the Developer Console.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-zone">
            Instance Zone
        </label>
        <select id="{{ idBase }}-zone"
               name="{{ nameBase }}[zone]"
               class="form-control select-tag">
            {% for key, zone in zones %}
                <option value="{{ key }}"
                    {% if key == machine.zone %}selected{% endif %}>{{ zone }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Choose the one closest to you, or your target audience!
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-machine_type">
            Instance Size
        </label>
        <select id="{{ idBase }}-machine_type"
               name="{{ nameBase }}[machine_type]"
               class="form-control select-tag">
            {% for type, description in machine_types %}
                <option value="{{ type }}"
                        {% if type == machine.machine_type %}selected{% endif %}>{{ type }} ({{ description }})</option>
            {% endfor %}
        </select>
        <div class="help-block">
            <a href="https://cloud.google.com/compute/pricing#machinetype"
               target="_blank">Pricing information</a>.
            Google Compute Engine charges by the hour, but also shows
            what a full month would cost.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-tags">
            Server Tags
        </label>
        <select id="{{ idBase }}-tags"
               name="{{ nameBase }}[tags][]"
               multiple class="form-control select-tags-editable">
            {% for tag in machine.tags %}
                <option selected value="{{ tag }}">{{ tag }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Tags for this machine. Comma-separated.
        </div>
    </div>

    <div class="clearfix"></div>
</div>
